<!--processed-->
<link rel="stylesheet" href="/views/resolution/tmp.css">
<section id="resolution">
    <div class="breadcrumb">
        <span>Resolution Center</span>
    </div>
    <div class="layout-processed feat-grid">
        <form id="form" action="" class="header">
            <div class="clearfix">
                <div class="header-item w13 fl">
                    <section data-name="merchant_id" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="merchant_id" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content" id="site_id" style="width:auto;max-height: 500px;">
                            <li data-val="" class="sel-list"></li>
                        </ul>
                    </section>
                </div>
                <div class="header-item fl">
                    <a href=""><button class="btn-a ml10" id="statistics" type="button">statistics</button></a>
                    <button class="btn-b ml10 hide" disabled>activity</button>
                </div>
                <div class="header-item fl ml10 update">
                    <button id="update" class="btn-e ml10">
                        <i class="send-animate"><span class="send-main"></span></i>
                        <span class="send-text">Update</span>
                    </button>
                    <span class="ml10">Last update time：</span><span data-name="updateTime">0</span>
                </div>

                <!--<div class="header-item fl ml10">
                    <a href=""><button id="inquirySite" class="btn-b ml10" type="button">站点查询</button></a>
                </div>-->
                <!--<div class="header-item w15">
                    <label class="item-label">投诉类型</label>
                    <section data-name="dispute_channel" class="com-select item-com">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="dispute_channel" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content">
                            <li data-val="EXTERNAL" class="sel-list">外部</li>
                            <li data-val="INTERNAL" class="sel-list">内部</li>
                        </ul>
                    </section>
                </div>-->
                <!--<div class="header-item w8">
                    <section data-name="status" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="status" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content">
                            <li data-val="OPEN" class="sel-list">开启</li>
                            <li data-val="OTHER" class="sel-list">其他</li>
                            <li data-val="RESOLVED" class="sel-list">已解决</li>
                            <li data-val="UNDER_REVIEW" class="sel-list">正在审查</li>
                            <li data-val="WAITING_FOR_BUYER_RESPONSE" class="sel-list">等待买家回复</li>
                            <li data-val="WAITING_FOR_SELLER_RESPONSE" class="sel-list">等待卖家回复</li>
                        </ul>
                    </section>
                </div>-->
                <!--<div class="header-item w15">
                    <label class="item-label">投诉原因</label>
                    <section data-name="reason" class="com-select item-com">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                            <input name="reason" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul class="sel-content">
                            <li data-val="" class="sel-list">全部</li>
                            <li data-val="CANCELED_RECURRING_BILLING" class="sel-list">已取消的循环交易</li>
                            <li data-val="CREDIT_NOT_PROCESSED" class="sel-list">退款未处理</li>
                            <li data-val="DUPLICATE_TRANSACTION" class="sel-list">重复交易</li>
                            <li data-val="INCORRECT_AMOUNT" class="sel-list">金额不符</li>
                            <li data-val="MERCHANDISE_OR_SERVICE_NOT_AS_DESCRIBED" class="sel-list">商品或服务描述不符</li>
                            <li data-val="MERCHANDISE_OR_SERVICE_NOT_RECEIVED" class="sel-list">商品或服务未收到</li>
                            <li data-val="OTHER" class="sel-list">其他</li>
                            <li data-val="PAYMENT_BY_OTHER_MEANS" class="sel-list">其他方式支付</li>
                            <li data-val="UNAUTHORISED" class="sel-list">未授权交易</li>
                        </ul>
                    </section>
                </div>-->
                <div class="header-item fr mr30">
                    <button id="check" type="button" class="btn-e">查询</button>
                    <!--<button id="staff" type="button" class="btn-a ml5">下载报表</button>-->
                </div>
                <div class="header-item w15 fr mr10">
                    <!--search-->
                    <div class="search-a fx-row-b">
                        <i id="searchBtn" class="iconfont icon-sousuo"></i>
                        <input name="content" type="text" placeholder="CaseId、交易号">
                    </div>
                </div>
            </div>

            <div class="header-sort fx-row-a mt7">
                <div data-val="" class="sort-list active-sort">All</div>
                <div data-val="New" class="sort-list">New</div>
                <div data-val="Response_Required" class="sort-list">Response Required</div>
                <div data-val="UNDER_REVIEW" class="sort-list">Under Review by Paypal</div>
                <div data-val="WAITING_FOR_BUYER_RESPONSE" class="sort-list">Awaitiing Buyer's Response</div>
                <div data-val="Message_From_Buyers" class="sort-list">Message From Buyers</div>
                <!--<div data-val="RESOLVED" class="sort-list">Closed Case (<span>12</span>)</div>-->
            </div>
        </form>

        <div class="data-box">
            <table class="table-b">
                <thead class="t-head">
                    <tr>
                        <td>
                            <table class="table-b-box">
                                <tr>
                                    <th class="w15">Case ID</th>
                                    <th class="w8">Owner</th>
                                    <th class="w10">Case Type</th>
                                    <th class="w10">Case Reason</th>
                                    <th class="w10">Case Status</th>
                                    <th class="w10">Disputed amount</th>
                                    <th class="w10">Last updated on</th>
                                    <th class="w8">Refund result</th>
                                    <th class="w12">
                                        <span>Action</span>
                                        <section data-name="is_reply" class="com-select th-action">
                                            <div class="sel-item">
                                                <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                                                <input name="is_reply" type="hidden" value="">
                                                <i class="sel-icon"></i>
                                            </div>
                                            <ul class="sel-content">
                                                <li data-val="" class="sel-list">All</li>
                                                <li data-val="2" class="sel-list">Response</li>
                                                <li data-val="1" class="sel-list">View</li>
                                            </ul>
                                        </section>
                                    </th>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>
                <tbody id="siteData" data-name="menuItem">
                </tbody>
            </table>
        </div>

    </div>
    <footer class="footer fx-row-b">
        <div>
            <span>Showing <span id="page-start">1</span> to <span id="page-end">20</span> of <span id="page-total">0</span> entries</span>
            <select name="page">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span>records per page</span>
        </div>
        <section id="box-page"></section>
    </footer>
</section>

<!--渲染模板开始-->

<!--站点列表-->
<script id="resolution-site-list" type="text/html">
    {{each data as v i}}
    <li data-val="{{v.pp_merchant_id}}" class="sel-list">{{v.pp_account_email ? v.pp_account_email : v.site_name}}</li>
    {{/each}}
</script>

<!--状态选项-->
<script id="header-sort" type="text/html">
    <div data-val="" class="sort-list">All</div><!--({{total_cnt}})-->
    <div data-val="New" class="sort-list">New</div><!-- ({{open_cnt}})-->
    <div data-val="Response_Required" class="sort-list">Response Required</div><!-- ({{seller_cnt}})-->
    <div data-val="UNDER_REVIEW" class="sort-list">Under Review by Paypal</div><!-- ({{paypal_review_cnt}})-->
    <div data-val="WAITING_FOR_BUYER_RESPONSE" class="sort-list">Awaitiing Buyer's Response</div><!-- ({{buyer_cnt}})-->
    <div data-val="Message_From_Buyers" class="sort-list active-sort">Message From Buyers</div><!--  ({{first_stage_cnt}})-->
    <!--<div data-val="RESOLVED" class="sort-list">Closed Case ({{resolved_cnt}})</div>-->
</script>

<!--list data {{v.paypal_dispute_detail}}-->
<script id="site-data-b" type="text/html">
    {{each data as v i}}
    {{set temp = v.dispute_life_cycle_stage == 'INQUIRY' ? 'detail' : 'detail2';}}
    <tr class="nth" data-name="menuList">
        <td class="table-b-box">
            <table class="box-title">
                <tbody>
                    <tr>
                        <td class="title-id w15 row">
                            <div class="col-sm-16 tr">
                                <i class="icon-a" data-name="menuTitle"></i>
                                <span class="id-text tc">{{v.dispute_id}}</span>
                            </div>
                            <div class="col-sm-8">
                                {{if v.left_day>=0}}
                                <i class="icon-b {{v.left_day<=1 ? 'icon-b-active' : ''}}">{{v.left_day}} left</i>
                                {{/if}}
                            </div>
                        </td>
                        <td class="w8">{{v.owner}}</td>
                        <td class="w10">{{v.current_stage}}</td>
                        <td class="w10">{{v.current_reason}}</td>
                        <td class="w10">{{v.current_status}}</td>
                        <td class="w10">{{v.dispute_amount_currency_code + v.dispute_amount_value}}</td>
                        <td class="w10">{{v.update_date}}</td>
                        <td class="w8">{{v.is_refund}}</td>
                        <td class="w12">
                            <a href="/{{$imports.path}}#resolution/{{temp}}/{{v.dispute_id}}" target="_self" class="">
                            {{if(v.status == 'UNDER_REVIEW')}}
                                <button class="btn-d">view</button>
                            {{else}}
                                <button class="btn-d">{{v.is_reply == 1 ? 'view':'response'}}</button>
                            {{/if}}
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="box-detail" data-name="menuContent">
                <div class="row">
                    <div class="col-sm-5 col-md-4 col-sm-offset-2">
                        <label class="col-sm-8 tr">Transaction ID：</label>
                        <span class="col-sm-16 tl">{{v.details.transaction_id}}</span>
                    </div>
                    <div class="col-sm-5 col-md-4">
                        <label class="col-sm-8 tr">Name：</label>
                        <span class="col-sm-16 tl">{{v.details.buyer}}</span>
                    </div>
                    <div class="col-sm-5 col-md-4">
                        <label class="col-sm-8 tr">Respond by：</label>
                        <span class="col-sm-16 tl">{{v.details.respond_by}}</span>
                    </div>
                    <div class="col-sm-5 col-md-4">
                        <label class="col-sm-8 tr">Opened on：</label>
                        <span class="col-sm-16 tl">{{v.details.opened_on}}</span>
                    </div>
                </div>
                <div class="row mt10">

                </div>
            </div>
        </td>
    </tr>
    {{/each}}
</script>


<!-- js -->
<script>

    $.extend(window.p,{
        page:1,
        num:20,
        merchant_id:com.getCookie("merchant_id") ? com.getCookie("merchant_id") : null,
        total:0,
        pageObj:null,
        comCheck:null,
        src : [],
        data:{
        },
        loop:null,
    });

    $(function(){

        init();

        function init(){
            if(com.getCookie('pageNum')) {
                p.num = com.getCookie("pageNum");
            }
            //默认分页显示
            $("select[name='page']").val(p.num);

            //初始化分页
            initPage();

            $("#siteData").comMenu();

            //初始化选择组件
            $("[data-name='dispute_channel']").comSelect({init:true});
            //$("[data-name='reason']").comSelect({init:false});
            $(".th-action").comSelect({
                init:true,
                callback:function(){
                    request('init');
                }
            });

            //查询事件
            $("#check,#searchBtn").on('click',function(){
                //request('init');
                $(".sort-list").eq(0).click()
            });

            //选择分页事件
            $("select[name='page']").on('change',function(){
                var val = $(this).val();
                com.setCookie('pageNum',val,720);
                p.num = val;
                request();
                //location.reload();
            });

            //设置跳转链接(动态设置避免环境问题)
            $("#statistics").closest('a').prop('href','/' + para.path + "#resolution/statistics/site");

            $("#inquirySite").closest('a').prop('href','/' + para.path + "#resolution/inquiry");

            //切换头部状态
            $(".header-sort").on('click',".sort-list",function(){

                var comObj = $("[data-name='is_reply']");
                    comObj.find("input[name='is_reply']").val('');
                    comObj.find("input.sel-head").val('All');
                var val = $(this).attr('data-val');
                if(val == 'Message_From_Buyers'){
                    comObj.removeClass('hide')
                }else{
                    comObj.addClass('hide')
                }

                $(this).addClass('active-sort').siblings('.sort-list').removeClass('active-sort');
                request('init')
            })

            //默认请求pay站点
            app.ajax({
                type:'get',
                url:app.api('/ppal/getsites/'),
                success:function(res){
                    if(res.code == 0){
                        var listTmp = template('resolution-site-list', res.data);
                        var headTmp = "";
                        if(p.merchant_id){
                            $.each(res.data.data,function(index,item){
                                if(item.pp_merchant_id == p.merchant_id){
                                    headTmp = template('header-sort',res.data.data[index].cnt_data);
                                    return false;
                                }
                            })
                        }else{
                            headTmp = template('header-sort',res.data.data[0].cnt_data);
                        }
                        $("#site_id").html(listTmp);
                        $(".header-sort").html(headTmp);
                        $("[data-name='merchant_id']").comSelect({
                            init:true,
                            search:true,
                            searchReg:true,
                            callback:function(val,text){
                                toggleSite(val ? val : p.merchant_id)
                            }
                        });
                        if(p.merchant_id){
                            $("#site_id").find('li').each(function(index,item){
                                var self = $(item);
                                var val = self.attr('data-val');
                                var text = self.html();
                                if(p.merchant_id == val){
                                    $("input[name='merchant_id']").val(val);
                                    $("[data-name='merchant_id']").find('.sel-head').val(text);
                                    return false;
                                }
                            })
                        }

                        //初始化请求数据列表
                        request();
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            });

            //默认请求：后台是否有正在更新
            getDefaultUpdate();
            $("#update").on('click',function(){
                var that = $(this);
                getUpdateData(that)
            })
        }

        //切换站点
        function toggleSite(id){
            app.ajax({
                type:'get',
                url:app.api('/ppal/getsites/' + id),
                success:function(res){
                    if(res.code == 0){
                        var headTmp = template('header-sort',res.data.data.cnt_data);
                        $(".header-sort").html(headTmp);
                        com.setCookie('merchant_id',id,720);
                        p.merchant_id = id;
                        getDefaultUpdate();
                        request('init')
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            })
        }

        function initPage(){
            p.pageObj = $("#box-page").comPage({
                total:p.total,
                pages:p.num,
                callback:function(page){
                    p.page = page;
                    request();
                }
            });
        }

        function renderLeftPage(){
            $("#page-total").html(p.total);
            $("#page-start").html((p.page-1)*p.num + 1);
            if(p.page === 1){
                $("#page-end").html(p.num);
            }else if(p.page == Math.ceil(p.total/p.num)) {
                $("#page-end").html(p.total);
            }else{
                $("#page-end").html(p.page*p.num);
            }
        }

        //请求列表
        function request(init){

            if(!$("input[name='merchant_id']").val()){
                $("#siteData").html('');
                $.comMessage({
                    type:'warning',
                    text:'paypal投诉信息不存在！',
                });
                return;
            }

            init && (p.page = 1);

            var loadObj = null;
            app.ajax({
                type:'post',
                url:app.api('/ppal/getdisputes/'),
                data:getPara(),
                beforeSend:function(){
                    loadObj = $.load({
                        insert:$(".layout-processed"),
                    });
                    $('footer').removeClass('hide')
                },
                success:function(res){
                    //template.defaults.imports.count = (p.page-1)*p.num + 1;
                    if(res.code == 0){
                        console.log(res);
                        var tmp = template('site-data-b', res.data);
                        $("#siteData").html(tmp);
                        p.total = res.data.total_cnt;

                        if(init){
                            p.pageObj.setPage(p.total,p.num,1);
                        }else{
                            p.pageObj.setPage(p.total,p.num);
                        }
                        renderLeftPage();

                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                        $("[name='content']").val('');
                        $("#siteData").html('');
                        $('footer').addClass('hide')
                    }
                },
                complete:function(){
                    loadObj.close()
                }
            });

        }

        //获取列表参数
        function getPara(){
            $.each($("#form").serializeArray(),function(index,item){
                p.data[item.name] = item.value ;
            });
            //p.data.account_id = p.data.account_id || para.user.account_ids[0] || "";
            p.data.status = $(".header-sort").find('.active-sort').attr('data-val');
            p.data.page = p.page;
            p.data.page_nums = p.num;
            p.data.is_reply = $("[data-name='is_reply']").find("input[name='is_reply']").val();
            return p.data;
        }

        //获取更新按钮的数据
        function getUpdateData(that){
            app.ajax({
                type:'get',
                url:app.api('/api/updateSiteCase/' + p.merchant_id),
                data:{},
                success:function(res){
                    that.addClass('active-animate');
                    that.prop("disabled",true);
                    if(res.code == 0){
                        $.comMessage({
                            type:'success',
                            text:res.msg,
                        });

                    }else{
                        $.comMessage({
                            type:'prompt',
                            text:res.msg,
                        });
                    }
                }
            });
        }

        function getDefaultUpdate(){
            clearTimeout(p.loop);
            app.ajax({
                type:'get',
                url:app.api('/api/isUpdatedSiteCase/' + p.merchant_id),
                data:{},
                success:function(res){
                    $("[data-name='updateTime']").html(res.data.update_time);
                    if(res.code == 0){
                        $("#update").removeClass('active-animate').prop("disabled",false);
                    }else if(res.code == 2){
                        $("#update").addClass('active-animate').prop("disabled",true);
                        p.loop = setTimeout(function(){
                            getDefaultUpdate();
                        },5000)
                    }else if(res.code == 3){
                        $("#update").removeClass('active-animate').prop("disabled",false);
                    }else if(res.code == 4){
                        $("#update").removeClass('active-animate').prop("disabled",false);
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            });
        }


    })

</script>